<template>
	<rui-pages :bar="menu.model" :title="headerName">
		<view class="model">
			<rui-card class="model_data" title="运行数据">
				<view class="model_data_box">
					<view class="model_data_box_detail">
						<view class="model_data_box_detail_item">
							<view class="model_data_box_detail_item_label">
								总时间
							</view>
							<view class="model_data_box_detail_item_content">
								25分30秒
							</view>
						</view>
						<view class="model_data_box_detail_item">
							<view class="model_data_box_detail_item_label">
								倒计时
							</view>
							<view class="model_data_box_detail_item_content">
								{{runder.countdown}}s
							</view>
						</view>
						<view class="model_data_box_detail_item">
							<view class="model_data_box_detail_item_label">
								步骤名
							</view>
							<view class="model_data_box_detail_item_content">
								{{runder.name || "待启动"}}
							</view>
						</view>
						<view class="model_data_box_detail_item">
							<rui-progress :number="runder.progress"></rui-progress>
						</view>
					</view>
					<rui-run></rui-run>
				</view>
			</rui-card>
			<rui-card class="model_step" title="运行步骤">
				<view style="height: 160px;text-align: center;position: relative;">
					<block v-if="runder.info?.setp">
						<view style="padding-top: 50px;font-size: 16px;">
							{{runder.info?.setp}}/{{runder.info?.current}} {{runder.info?.msg}}
						</view>
						<view style="color: #999;font-size: 12px;">
							{{runder.info?.desc}}
						</view>

						<view style="position: absolute;top:10px;right: 20px;color: #999;font-size: 12px;"
							v-if="runder.countdown">
							{{runder.countdown}}s
						</view>
					</block>
				</view>
				<view class="step">
					<view class="step_item" :class="runder.current >= index ? (index == runder.current ? 'current':'done'): ''"
						v-for="(item, index) in setpList" :key="index">
						{{item}}
					</view>
				</view>

			</rui-card>
			<view class="model_btn">
				<view class="model_btn_item" @click="run(100)">
					运行
				</view>
				<view class="model_btn_item" @click="start(200)">
					大阀2
				</view>
				<view class="model_btn_item" @click="start(300)">
					真空阀3
				</view>
				<view class="model_btn_item" @click="start(400)">
					大阀4
				</view>
				<view class="model_btn_item" @click="start(500)">
					真空阀5
				</view>
				<view class="model_btn_item" @click="start(600)">
					大阀6
				</view>
			</view>
			<rui-card class="model_status" title="运行状态">
				<view class="model_status_item" v-for="(item, index) in status" :key="index">
					<view class="model_status_item_label">
						{{item.name}}
					</view>
					<view class="model_status_item_content">
						{{item.number}}
					</view>
					<view class="model_status_item_unit">
						{{item.unit}}
					</view>
				</view>
			</rui-card>
		</view>
	</rui-pages>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"

	import menu from "@/utils/menu";
	import Detection from "@/utils/serial/detection";
	import { runderStore } from "@/store";
	
	let runder = runderStore();

	let countdown = ref(0)
	// let info = ref({
	// 	total: 0,
	// 	current: 0,
	// 	message: "",
	// 	desc: ""
	// })
	let interval;
	// let progress = ref(0)
	let setpList = ref([])
	let detection
	let name = ref("")
	// let current = ref(-1)
	let headerName = ""
	
	
	onLoad(opts => {
		console.log(1111, opts)
		// runType = opts.type
		headerName = opts.name
		detection = new Detection(opts.type);
		setpList.value = detection.menu;

		detection.success = (type, data, setp) => {
			// if (type == 'setp') {
			// 	name.value = data.name
			// 	current.value = data.current
			// 	progress.value = 0
			// }

			// if (type == 'run') {
			// 	info.value.current = data.current
			// 	info.value.message = data.msg
			// 	info.value.desc = data.desc
			// 	countdown.value = data.ttl
			// 	//当前总步骤总数
			// 	info.value.total = setp;
			// 	//版块进度
			// 	progress.value = Math.ceil((data.current - 1) / setp * 100)
			// 	console.log("进度", progress.value)
			// 	clearInterval(interval)
			// 	setTime()
			// }
			// if (type == 'done') {
			// 	progress.value = 100
			// }

			if (type == 'success') {
				uni.$rui.route('/pages/device/interpret/interpret')
			}

		}
		detection.stop = () => {
			
			
			countdown.value = 0
			// info.value.current = 0
			// info.value.message = ""
			// info.value.desc = ""
			clearInterval(interval)
		}
	})

	const run = () => {
	
		detection.start()
		// console.log(222222, detection.setp)
	}

	const setTime = () => {
		interval = setInterval(() => {
			if (countdown.value <= 0) {
				countdown.value = 0;
				clearInterval(interval)
				return
			}
			countdown.value--;
		}, 1000)
	}


	let status = [{
			name: "内胆泄露率",
			number: 10,
			unit: "Pa/s"
		},
		{
			name: "蒸发器泄露率",
			number: 10,
			unit: "Pa/s"
		},
		{
			name: "内胆压力",
			number: 10,
			unit: "Pa/s"
		},
		{
			name: "内胆温度",
			number: 10,
			unit: "℃"
		},
		{
			name: "蒸发器压力",
			number: 10,
			unit: "Pa/s"
		},
		{
			name: "蒸发器温度",
			number: 10,
			unit: "℃"
		},
		{
			name: "冷凝器",
			number: 10,
			unit: "℃"
		},
		{
			name: "柜门",
			number: 10,
			unit: "℃"
		},
		{
			name: "后柜门",
			number: 10,
			unit: "℃"
		},
		{
			name: "机箱温度",
			number: 10,
			unit: "℃"
		},
		{
			name: "等离子功率",
			number: 10,
			unit: "W"
		},
	]

	/**
	 * 1、获取配置选项
	 */

	// let model = new Model()
	// const start = (canID) => {
	// 	console.log("---send---", canID)
	// 	CanIO.sendData(canID, "01020304");


	// 	// model.run()
	// }
</script>

<style lang="scss" scoped>
	.model {
		display: grid;
		grid-template-columns: 1fr 200px 350px;
		grid-template-rows: repeat(2, 1fr);
		gap: 15px;

		&_data {
			grid-column: 1/3;

			&_box {
				display: grid;
				grid-template-columns: 220px 1fr;
				margin-top: 15px;

				&_detail {
					margin-right: 20px;

					&_item {
						display: flex;
						align-items: center;
						margin-bottom: 10px;

						&:last-child {
							margin-bottom: 0;
						}

						&_content {
							background: var(--bg);
							padding: 8px 10px;
							border-radius: 5px;
							width: calc(100% - 80px);
						}

						&_label {
							margin-right: 10px;
						}
					}
				}
			}
		}

		&_btn {
			grid-column: 2/3;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 8px;

			&_item {
				border-radius: 15px;
				border: 3px solid #f7f8f9;
				box-shadow: 0 3px 15px rgba(0, 0, 0, .06);
				background: linear-gradient(to bottom, #ebeff7, #fff);
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;

				&:active {
					background: var(--bg);
				}

			}
		}

		.step {
			display: flex;
			justify-content: space-between;
			grid-column: 1/2;

			&_item {
				background: var(--bg);
				width: 20%;
				text-align: center;
				height: 40px;
				line-height: 40px;
				font-size: 18px;
				clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
			}
		}

		&_status {
			grid-column: 3/4;
			grid-row: 1/3;

			&_item {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 10px 0;

				&_label {
					width: calc(100% - 200rpx);
					text-align: right;
				}

				&_content {
					background: var(--bg);
					padding: 6px;
					margin: 0 10px;
					border-radius: 5px;
					width: 100px;
					text-align: center;
					font-weight: bold;
					font-size: 18px;
				}

				&_unit {
					width: 40px;
				}
			}
		}

		.done {
			background: var(--color) !important;
			color: #fff;
		}

		.current {
			background: #0bc9c9 !important;
			color: #fff;
		}
	}
</style>